/* 星星动画 */
@keyframes blinkStar{
    0%{
      transform:scale(0.7,0.7);
    }
    50%{
        transform:scale(1.2,1.2);
      }
      100%{
        transform:scale(0.7,0.7);
      }
}
@-o-keyframes blinkStar{
    0%{
      transform:scale(0.7,0.7);
    }
    50%{
        transform:scale(1.2,1.2);
      }
      100%{
        transform:scale(0.7,0.7);
      }
}
@-ms-keyframes blinkStar{
    0%{
      transform:scale(0.7,0.7);
    }
    50%{
        transform:scale(1.2,1.2);
      }
      100%{
        transform:scale(0.7,0.7);
      }
}
@-webkit-keyframes blinkStar{
    0%{
      transform:scale(0.7,0.7);
    }
    50%{
        transform:scale(1.2,1.2);
      }
      100%{
        transform:scale(0.7,0.7);
      }
}
@-ms-keyframes blinkStar{
    0%{
      transform:scale(0.7,0.7);
    }
    50%{
        transform:scale(1.2,1.2);
      }
      100%{
        transform:scale(0.7,0.7);
      }
}

/* 摆动小灯泡 */
@keyframes moveLamp{
    0%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
   50%{
        transform-origin:50% 0;
        transform: rotate(-12deg);
    }
    100%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
}
@-o-keyframes moveLamp{
    0%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
   50%{
        transform-origin:50% 0;
        transform: rotate(-12deg);
    }
    100%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
}
@-moz-keyframes moveLamp{
    0%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
   50%{
        transform-origin:50% 0;
        transform: rotate(-12deg);
    }
    100%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
}
@-webkit-keyframes moveLamp{
    0%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
   50%{
        transform-origin:50% 0;
        transform: rotate(-12deg);
    }
    100%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
  
}
@-ms-keyframes moveLamp{
    0%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
   50%{
        transform-origin:50% 0;
        transform: rotate(-12deg);
    }
    100%{
        transform-origin:50% 0;
        transform: rotate(12deg);
    }
  
}
/* 小星星 */
.star{
    display: inline;
}
.star:nth-child(4n+0){
  
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background-color:#C3E6FB ;
    float: left;
    margin-left: 12%;
    margin-top: 7%; 
    /* 模糊阴影 */
    box-shadow: 2px 3px 7px white;
    /* 闪亮动画 */
    animation: blinkStar 1.4s infinite;
    -moz-animation: blinkStar 1.4s infinite;
  -o-animation: blinkStar 1.4s infinite;
  -webkit-animation:blinkStar 1.4s infinite;
  -ms-animation: blinkStar 1.4s infinite;
}
.star:nth-child(4n+1){
    width: 4px;
    height:4px;
    border-radius: 4px;
    background-color:#F6EE52 ;
    float: left;
    margin-left: 6%;
    margin-top: 13%; 
    /* 模糊阴影 */
    box-shadow: 2px 3px 5px white;
    /* 闪亮动画 */
    animation: blinkStar 1.6s infinite;
    -moz-animation: blinkStar 1.6s infinite;
  -o-animation: blinkStar 1.6s infinite;
  -webkit-animation:blinkStar 1.6s infinite;
  -ms-animation: blinkStar 1.6s infinite;
}
.star:nth-child(4n+2){
    width: 10px;
    height:10px;
    border-radius: 10px;
    background-color:#F3D160 ;
    float: left;
    margin-left:12%;
    margin-top: 5%; 
    /* 模糊阴影 */
    box-shadow: 2px 3px 7px blue;
    /* 闪亮动画 */
    animation: blinkStar 1.7s infinite;
    -moz-animation: blinkStar 1.7s infinite;
  -o-animation: blinkStar 1.7s infinite;
  -webkit-animation:blinkStar 1.7s infinite;
  -ms-animation: blinkStar 1.7s infinite;
}
.star:nth-child(4n+3){
    width: 8px;
    height:8px;
    border-radius: 8px;
    background-color:#FDE700 ;
    float: left;
    margin-left:14%;
    margin-top: 8%; 
    /* 模糊阴影 */
    box-shadow: 2px 3px 7px skyblue;
    /* 闪亮动画 */
    animation: blinkStar 1.1s infinite;
    -moz-animation: blinkStar 1.1s infinite;
  -o-animation: blinkStar 1.1s infinite;
  -webkit-animation:blinkStar 1.1s infinite;
  -ms-animation: blinkStar 1.1s infinite;
}
/* ---------------------------------------------- */
/* 灯泡 */
.lamp{
    /* 脱离文档流 */
    float: left;
}
.lamp img{
  width: 11rem;
  height: 16rem;
  animation: moveLamp 1.5s infinite;
  -moz-animation: moveLamp 1.5s infinite;
  -o-animation: moveLamp 1.5s infinite;
  -webkit-animation: moveLamp 1.5s infinite;
  -ms-animation: moveLamp 1.5s infinite;
}
body{
    position: relative;
}
.header_content{
    width: 80%;
    height: 48rem;
    position: absolute;
    margin: 2rem 10%;
    /* background-color: #FDEE00; */
    overflow: hidden;
}

.content-box{
    position: relative;
}
.header_content  div{
    width: 100%;
    height: 48rem;
    background-color: rgba(125,141,236,0.3);
    border-radius: 0.83rem;
}
/* 主页 */
#main,#me,#learn{
    padding: 3rem;
}
#main span{
    display: block;
    font-size: 2em;
    text-align: center;
    margin:6rem auto;
    color: white;
}
/* 个人介绍 和学习经历 */
#me table{
        width: 50%;
        height: 8.5rem;
        margin: 2rem auto;
        border-collapse: collapse;
}
table,table tr th, table tr td { border:0.5px solid white; }/*设置边框的*/
#me td {
    font-size:1.5rem;
    text-align: center;
    color: white;
    padding: 1rem;
}

#learn span{
    display: block;
    font-size: 3rem;
    text-align: center;
    margin:2rem auto;
    color: white;
}
/* 兴趣爱好 */

#like span{
    height:3rem;
    text-align: center;
     color: white;
    font-size: 2rem;
    font-weight: bold;
    display: block;
}
.img-box{
    position: absolute;
    margin: auto;
}
.img-box img{
    width: 20%;
    height: auto;
    float: left;
    padding: 1rem;
}
/* 底部导航
footer{
    width: 90%;
    height: 2.5rem;
    position: absolute;
    bottom: 0.5rem;
    margin: 0 auto;
}
footer li{
    float: left;
    margin: 0.5rem;
}
footer a{
    color: white;
    font-size: 1.5rem;
} */

/* 联系 */
form{
    margin: auto 10%;
    
}
.top1{
    margin-top: 7%;
}
#contacr{
    padding-top: 30px;
}
input{
    width: 50%;
    margin-top: 1.2rem;
    margin-left: 10%;
    height:2.83rem;
    border-radius: 0.5rem;
    padding-left: 1rem;
    font-size: 1.5rem;
}
textarea{
    margin-top: 1.2rem;
    margin-left: 10%;
    border-radius: 0..5rem;
    padding-left: 1rem;
    padding-top: 0.5rem;
    width: 60%;
    font-size: 1.5rem;
}
button{
    margin-left: 10%;
    border-radius: 0.5rem;
    padding: 1rem;
  
    width: 10%;
    text-align: center;
    font-size:1.5rem;
    font-weight: bold;
    margin-top: 1rem;
    background-color: deepskyblue;
    
}
button:hover{
    color: azure;
}
/* 底端导航 */
ul{
    width: 80%;
    height: 3rem;
    position: absolute;
    left: 10%;
    top:92%;
    /* background-color: #FDEE00; */
}
ul li{
   color: black;
   width: 20%;
   height: 100%;
   text-align: center;
   line-height: 3rem;
   float: left; 
   font-size:1.3rem;
   /* background-color:#96C7FF;
   border-radius:20px;  */

}
a{
      background-color:#96C7FF;
      /* opacity: 0.5; */
       border-radius:0.8rem; 
       padding: 0.25rem  1.5rem;
}
a:hover{
    font-weight: bold;
    color: white;
}